$header-background: #131313;
$header-color: #a3a3a3;
$header-size: 30px;
$header-font-size: 14px;
$footer-size: 14px;
$footer-font-size: 10px;
$icon-size: 16px;

$border-color: #1a1a1a;

::ng-deep {
  app-header {
    .controls {
      .mat-icon {
        height: $icon-size;
        width: $icon-size;
        font-size: $icon-size;
        line-height: $icon-size;

        & + .mat-icon {
          margin-left: 3px;
        }
      }
    }
  }
}

.footer,
.header {
  position: relative;
  background: $header-background;
  color: $header-color;
  font-family: FontinSmallCaps;

  &.fixed {
    position: fixed;
    z-index: 1000;
    left: 0;
    right: 0;
  }
}

.header {
  height: $header-size;
  line-height: $header-size + 2px;
  font-size: $header-font-size;

  .name {
    text-align: center;
  }

  &.fixed {
    &:not(.reverse) {
      top: 0;
    }

    &.reverse {
      bottom: 0;
    }
  }
}

.footer {
  display: flex;
  height: $footer-size;
  line-height: $footer-size;
  font-size: $footer-font-size;
  padding: 0 3px;

  &.fixed {
    &:not(.reverse) {
      bottom: 0;
    }

    &.reverse {
      top: 0;
    }
  }
}

.spacer {
  flex-grow: 1;
}

.controls {
  position: absolute;
  cursor: pointer;
  top: 0;
  height: $header-size;
  line-height: $header-size + 8px;

  &:not(.left) {
    right: 10px;
  }

  &.left {
    left: 10px;
  }

  .settings,
  .pin {
    height: $icon-size - 3px;
    width: $icon-size - 3px;
    font-size: $icon-size - 3px;
    line-height: $icon-size - 3px;
  }

  .pin {
    will-change: transform, top;
    transition: transform ease-in-out 200ms, top ease-in 100ms;

    &.pinned {
      top: 0px;
      transform: rotateZ(40deg);
      transform-origin: center;
    }
  }
}

.content {
  width: 100%;
  height: 100%;

  &:not(.fixed) {
    &.has-footer {
      height: calc(100% - #{$footer-size} - #{$header-size});
    }

    height: calc(100% - #{$header-size});
  }

  &.fixed {
    padding: $header-size 0 0 0;

    &.has-footer {
      padding: $header-size 0 $footer-size - 1px 0;
    }

    &.reverse {
      padding: 0 0 $header-size 0;

      &.has-footer {
        padding: $footer-size 0 $header-size - 1px 0;
      }
    }
  }

  &.frame {
    border: 1px solid $border-color;
    border-top: none;
  }
}
